<template>
	<div class="a">
		<aside>
			<el-menu router>
				<el-menu-item
					:key="item.id"
					v-for="(item, index) in menus"
					:index="item.path"
					><i class="el-icon-menu"></i>{{ item.route_cn_name }}>
				</el-menu-item>
			</el-menu>
		</aside>
		<div class="box">
			<header>
				{{ $store.state.user.nickname }}
				<el-button type="" @click="out">登出</el-button>
			</header>
			<main><slot></slot></main>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	computed: {
		menus() {
			return this.$store.state.user.menuPermissions
		},
	},
	methods: {
		out() {
			//删除令牌
			localStorage.removeItem('token')
			this.$router.push('/login')
		},
	},
}
</script>

<style>
.a {
	display: flex;
	width: 100vw;
	height: 100vh;
}
aside {
	width: '100px';
	height: '100vh';
}
.el-menu {
	height: 100vh;
}
.box {
	flex: 1;
	display: flex;
	flex-direction: column;
}
header {
	height: 60px;
	border-bottom: 1px solid #eee;
}
main {
	flex: 1;
}
</style>
